<template>
  <div class="layout">
    <div class="search" @click="handleSearch">
      <u-icon name="search"></u-icon>
     <div style="padding-left: 15rpx;">
		  {{ res.list[0].title }}
	 </div>
    </div>
	  <div slot="right" open-type="contact" class="navbar-right btn" >
	  		  搜 索
	</div>
  </div>
</template>
<script>
export default {
  title:"搜索栏",
  props: ["res","storeId"],
  methods: {
    linkMsgDetail(){
      uni.navigateTo({
        url:`/pages/tabbar/home/title`
      })
    },
 
    handleSearch() {
      if(this.storeId){
        uni.navigateTo({
        url: `/pages/navigation/search/searchPage?storeId=${this.storeId}`,
      });
      }else{
         uni.navigateTo({
        url: `/pages/navigation/search/searchPage`,
      });
      }
      
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";

.search {
  height: 78rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 24rpx;
  background: #FFFFFF;
}

.layout {

  padding: 0 16rpx;
  position: relative;
  background: rgb(25, 189, 93);
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 27rpx;
  color: #888888;
  width: 90%;
}
.navbar-right{
	position: absolute;
	top: 50%;
	right: 24rpx;
	transform: translateY(-50%);
	
}

.btn {
	width: 120rpx;
	height: 60rpx;
	border: 30rpx;
	text-align: center;
	color: #FFFFFF;
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 21rpx;
	line-height: 60rpx;
	background: rgb(25, 189, 93);
}
</style>
